<template>
    <div class="p-search-box" >
        <el-form :model="value" :name="formName" :rules="rules" :inline="isInLine" :label-width="labelWidth" ref="searchForm" size="mini">
            <!--普通搜索区域-->
            <div class="general">
                <slot name="search"></slot>
                <el-form-item>
                    <el-button type="primary" @click="submit">&nbsp;搜 索 </el-button>
                    <el-button type="default" plain @click="reset"> 清 空</el-button>
                    <slot name="button"></slot>
                </el-form-item>
                <!--<div class="search-btn-box">-->
                    <!--<el-button size="mini" type="primary" class="el-icon-search" @click="submit">&nbsp;搜 索 </el-button>-->
                    <!--<el-button type="default" plain size="mini" class="el-icon-delete" @click="reset"> 清 空</el-button>-->
                <!--</div>-->
            </div>
        </el-form>
    </div>
</template>
<script>
    import bus from './eventbus.js';
/**
 * 功能：所有列表页搜索部分很多的情况下，会收起一部分内容，点击展开按钮是，显示更多选项
 * slot:
 *      general: 页面载入时需要显示的选项放在此slot内
 *      senior: 页面再入时不需要显示的选项，默认slot(即不在general里的内容都会渲染进这里)
 * props:
 *      value: el-form的 v-model,必须传
 *      rules: el-form的 :rules，选填，默认是一个空对象
 *      isInLine: 表单的布局方式，对应el-form的 inline prop
 *      formName: 当前表单的名字，选填，默认为 searchForm
 *      label-width: 表单域标签的宽度，作为 Form 直接子元素的 form-item 会继承该值
 * events:
 *      submit 提交触发此事件
 *      reset 重置触发此事件
 * */
export default {
    name: 'p-search-box',
    props: {
        value: {
            type: Object,
            default: () => {},
            required: true
        },
        rules: {
            type: Object,
            default() {
                return {};
            }
        },
        isInLine: {
            type: Boolean,
            default: true
        },
        formName: {
            type: String,
            default: 'searchForm'
        },
        labelWidth: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
        };
    },
    methods: {
        reset() {
            // this.$refs['searchForm'].resetFields();
            this.$emit('reset', this.$refs['searchForm']);
            this.$nextTick( () => {
                bus.$emit('p-table.init');  //触发请求表格数据
            })
        },
        submit() {
            this.$emit('submit', this.$refs['searchForm']);
        }
    }
};
</script>

<style rel="stylesheet/scss" lang="scss">

.p-search-box {
    background-color: #f5f7f9;
    padding: 12px 12px 0 12px;
    border: 1px solid #DDDDDD;
    .el-form-item__label,
    .el-radio__label {
        font-size: 12px;
    }

    /*.el-form-item {*/
    /*margin-bottom: 0;*/
    /*}*/
    .el-button--text {
        color: #3c9ccb;
        font-weight: 600;
    }
    .general {
        width: 100%;
        position: relative;

        /*&{*/
        /*position: relative;*/
        /*padding-right: 200px;*/
        /*overflow: auto;*/
        /*}*/
        > .search-btn-box {
            /*width: 160px;*/
            position: absolute;
            right: 0;
            margin-left: 20px;
            background: white;
        }

        .el-form-item {
            margin-bottom: 12px;
        }
    }


    .slide-fade-enter-active {
        transition: all 0.3s ease-in-out;
    }

    .slide-fade-leave-active {
        transition: all 0.01s ease-out; // cubic-bezier(1.0, 0.5, 0.8, 1.0);
    }

    .slide-fade-enter,
    .slide-fade-leave-active {
        /*transform: translate3D(0, 0, 0);*/
        height: 0;
        opacity: 0;
    }
}
</style>
